<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>持明法洲登录页面</title>
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="css/main.css"  media="all">
	<link rel="stylesheet" href="css/plugins/font-awesome-4.7.0/css/font-awesome.min.css"  media="all">

	<style>
		html,
		body {
			height: 100%;
			max-width: 100%;
			margin: 0;
			overflow: hidden;
			font-family: 'Microsoft Yahei';
			font-size: 14px;
		}
		p {
			margin: 0;
			padding: 0;
		}
		#space {
			width: 100%
		}
		#clock {
			font-family: 'Share Tech Mono', monospace;
			color: #ffffff;
			text-align: center;
			position: absolute;
			left: 50%;
			top: 25%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			color: #daf6ff;
			text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
		}
		#clock .time {
			letter-spacing: 0.05em;
			font-size: 80px;
			padding: 5px 0;
		}
		#clock .date {
			letter-spacing: 0.1em;
			font-size: 24px;
		}
		#clock .text {
			letter-spacing: 0.1em;
			font-size: 12px;
			padding: 20px 0 0;
		}
		iframe { pointer-events:none; }
	</style>

</head>

<body quick-markup_injected="true" scroll="no" oncontextmenu=self.event.returnValue=false onselectstart="return false" class="layui-layout-login">
<div class="login-bg">
	<div class="cover"></div>
</div>
<div style="background-color:rgba(0,0,0,0)" class="login-content" >
	<h1 class="login-box-title"><i class="fa fa-fw fa-user"></i></h1>
	<h4 class="login-box-title"><i class="fa fa-fw fa-user"></i>登录</h4>
	<form  class="layui-form" action="${pageContext.request.contextPath}/admin/login" method="post">
		<div style="color: #cccccc">${sessionScope.msg}</div>
		<div  class="layui-form-item">
			<label class="layui-icon layui-icon-username" for="username"></label>
			<input style="background-color:rgba(0,0,0,0.5);color: #cccccc" class="layui-input" type="text" name="username" id="username" placeholder="用户名">
		</div>

		<div class="layui-form-item">
			<label class="layui-icon layui-icon-password" for="password"></label>
			<input style="background-color:rgba(0,0,0,0.5);color: #cccccc"  class="layui-input" type="password" name="password" id="password" placeholder="密码">
		</div>

		<div class="layui-form-item captcha-item">
			<label class="layui-icon layui-icon-vercode"></label>
			<input style="background-color:rgba(0,0,0,0.5);color: #cccccc"  class="layui-input" type="text" name="code" autocomplete="off" placeholder="验证码">
			<img class="captcha-img" src="${pageContext.request.contextPath}/admin/getCaptcha" />
		</div>

		<button type="submit" class="layui-btn layui-btn-fluid ajax-login"><i class="fa fa-sign-in fa-lg fa-fw"></i> 登录</button>
	</form>
</div>


<script type="text/javascript" src="js/vue.min.js"></script>
<div id="clock">
	<p class="date">{{ date }}</p>
	<p class="time">{{ time }}</p>
	<p class="text" onselectstart="return false">
		<iframe scrolling="no" src="http://tianqiapi.com/api.php?style=tm&skin=pitaya" frameborder="0" width="268" height="23 " allowtransparency="true" style=" background-color:#a8fb85;" >
		</iframe>
	</p>
</div>
<script>
	var clock = new Vue({
		el: '#clock',
		data: {
			time: '',
			date: ''
		}
	});
	var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
	var timerID = setInterval(updateTime, 1000);
	updateTime();
	function updateTime() {
		var cd = new Date();
		clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
		clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
	};

	function zeroPadding(num, digit) {
		var zero = '';
		for(var i = 0; i < digit; i++) {
			zero += '0';
		}
		return (zero + num).slice(-digit);
	}
</script>
<canvas id="space"></canvas>
<script>
	//based on an Example by @curran
	window.requestAnimFrame = (function(){   return  window.requestAnimationFrame})();
	var canvas = document.getElementById("space");
	var c = canvas.getContext("2d");

	var numStars = 2000;
	var radius = '0.'+Math.floor(Math.random() * 9) + 1  ;
	var focalLength = canvas.width *2;
	var warp = 0;
	var centerX, centerY;

	var stars = [], star;
	var i;

	var animate = true;

	initializeStars();

	function executeFrame(){

		if(animate)
			requestAnimFrame(executeFrame);
		moveStars();
		drawStars();
	}

	function initializeStars(){
		centerX = canvas.width / 2;
		centerY = canvas.height / 2;

		stars = [];
		for(i = 0; i < numStars; i++){
			star = {
				x: Math.random() * canvas.width,
				y: Math.random() * canvas.height,
				z: Math.random() * canvas.width,
				o: '0.'+Math.floor(Math.random() * 99) + 1
			};
			stars.push(star);
		}
	}

	function moveStars(){
		for(i = 0; i < numStars; i++){
			star = stars[i];
			star.z-=1;

			if(star.z <= 0){
				star.z = canvas.width;
			}
		}
	}

	function drawStars(){
		var pixelX, pixelY, pixelRadius;

		// Resize to the screen
		if(canvas.width != window.innerWidth || canvas.width != window.innerWidth){
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			initializeStars();
		}
		if(warp==0)
		{c.fillStyle = "rgba(0,10,20,1)";
			c.fillRect(0,0, canvas.width, canvas.height);}
		// c.fillStyle = "rgba(209, 255, 255, "+radius+")";
		for(i = 0; i < numStars; i++){
			star = stars[i];

			pixelX = (star.x - centerX) * (focalLength / star.z);
			pixelX += centerX;
			pixelY = (star.y - centerY) * (focalLength / star.z);
			pixelY += centerY;
			pixelRadius = 1 * (focalLength / star.z);

			c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
			c.fillStyle = "rgba(209, 255, 255, "+star.o+")";
			//c.fill();
		}
	}

	executeFrame();

</script>


</body>
<script src="layui/layui.js" type="text/javascript"></script>
<script>
	/*form.submit(function () {
		console.log(11111);
		return false;
	})*/
</script>
</html>
